//
//  ContentView.swift
//  DesignCode
//
//  Created by zsy on 2020/2/15.
//  Copyright © 2020 zsy. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    @State var show = false  // State 状态模式
    @State var viewState = CGSize.zero //  viewState会有（x，y）值，初始化为（0, 0）
    @State var showCard = false
    @State var bottomState = CGSize.zero
    @State var showFull = false
    
    var body: some View {
        ZStack {
            
            // 标题界面
            TitleView()
                .blur(radius: show ? 20 : 0)  // 模糊
                .opacity(showCard ? 0.4 : 1)  // 不透明度
                .offset(y: showCard ? -200 : 0)
                .animation(
                    Animation   // 必须保留结构体名称
                        .default
                        .delay(0.1)
//                        .speed(2)
//                        .repeatForever()
                )
            
            // 第3张卡片
            BackCardView()
                .frame(width: showCard ? 300 : 340.0, height: 220.0)  // 设置宽高
                .background(show ? Color("card3") : Color("card4"))  // 设置背景颜色
                .cornerRadius(20)  // 设置圆角
                .shadow(radius: 20)  // 设置阴影
                .offset(x: 0, y: show ? -400 : -40)  // 往上偏移
                .offset(x: viewState.width, y: viewState.height)
                .offset(y: showCard ? -180 : 0)
                .scaleEffect(showCard ? 1 : 0.9) // 缩放到90%
                .rotationEffect(.degrees(show ? 0 : 10)) // 旋转效果：10度
                .rotationEffect(.degrees(showCard ? -10 : 0))  // 点击卡片，第3张从旋转变为水平
                .rotation3DEffect(Angle(degrees: showCard ? 0 : 10), axis: (x: 10.0, y: 0.0, z: 0.0))
                .blendMode(.hardLight)  // 混合模式: 强光
                .animation(.easeInOut(duration: 0.5))  // 添加动画
            
            // 第2张卡片
            BackCardView()
                .frame(width: 340.0, height: 220.0)  // 设置宽高
                .background(show ? Color("card4") : Color("card3"))
                .cornerRadius(20)
                .shadow(radius: 20)
                .offset(x: 0, y: show ? -200 : -20)
                .offset(x: viewState.width, y: viewState.height)
                .offset(y: showCard ? -140 : 0)
                .scaleEffect(showCard ? 1: 0.95)
                .rotationEffect(.degrees(show ? 0 : 5))   // show为真0,加5
                .rotationEffect(.degrees(showCard ? -5 : 0))  // 点击卡片，第2张从旋转变为水平
                .rotation3DEffect(Angle(degrees: showCard ? 0 : 5), axis: (x: 10.0, y: 0.0, z: 0.0))
                .blendMode(.hardLight)
                .animation(.easeInOut(duration: 0.3))  // 添加动画
            
            // 第1张卡片
            CardView()
                .frame(width: showCard ? 375 : 340.0, height: 220.0)  // 设置宽高
                .background(Color.black)
                // .cornerRadius(20)
                // 修剪形状->圆角矩形->圆角半径
                .clipShape(RoundedRectangle(cornerRadius: showCard ? 30 : 20, style: .continuous))
                .shadow(radius: 20)
                .offset(x: viewState.width, y: viewState.height)
                .offset(y: showCard ? -100 : 0)
                .blendMode(.hardLight)
                .animation(.spring(response: 0.3, dampingFraction: 0.6, blendDuration: 0))
                .onTapGesture {
                    self.showCard.toggle()
                }
                
                // 手势
                .gesture(
                    // 拖拽
                    DragGesture().onChanged { value in
                        self.viewState = value.translation
                        self.show = true // 拖拽隐藏
                    }
                        
                        // 松开
                        .onEnded { value in
                            self.viewState = .zero // 松开回到初始位置
                            self.show = false  // 松开显示
                        }
                )
            
            
            // 获取bottom y轴偏移量 -> 锚点定位
//            Text("\(bottomState.height)").offset(y: -300)
            
            
            // 底部文本框
            BottomCardView(show: $showCard)
                .offset(x: 0, y: showCard ? 360 : 1000)  // 默认向下隐藏
                .offset(y: bottomState.height)
                .blur(radius: show ? 20 : 0)  // 模糊
                // 时序曲线在线效果生成网站：cubic-bezier.com
                .animation(.timingCurve(0.2, 0.8, 0.2, 1, duration: 0.8))
                
                .gesture(
                    // 拖拽
                    DragGesture().onChanged { value in
                        self.bottomState = value.translation
                        if self.showFull {
                            self.bottomState.height += -300
                        }
                        
                        // 当高度小于-300，高度会被重新赋值，以防止文本框底部露出来
                        if self.bottomState.height < -300 {
                            //self.bottomState.height = -300   // 固定不动
                            self.bottomState.height = -325   // 有回弹
                        }
                    }
                        
                        // 松开
                        .onEnded { value in
                            // 当高度大于50，显示标题、卡片，隐藏文本框
                            if self.bottomState.height > 50 {
                                self.showCard = false   //
                            }
                            
                            // 当高度小于-100并且没有拖到全视图或者高度小于-250并且拖到过全视图 -> 全视图
                            if (self.bottomState.height < -100 && !self.showFull) || (self.bottomState.height < -250 && self.showFull) {
                                self.bottomState.height = -300   //
                                self.showFull = true
                            } else {
                                self.bottomState = .zero // 松开回到初始位置
                                self.showFull = false
                            }
                            
                        }
                )
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct CardView: View {
    var body: some View {
        VStack {
            HStack {
                VStack(alignment: .leading) {
                    Text("UI Design")
                        .font(.title)
                        .fontWeight(.semibold)
                        .foregroundColor(.white)
                    Text("Certificate")
                        .foregroundColor(Color("accent"))
                }
                Spacer()   // 隔开
                Image("Logo1")
            }
                .padding(.horizontal, 20)   // 设置左右内边距，默认值16
                .padding(.top, 20)// 设置顶部内边距
            Spacer()
            Image("Card1")
                .resizable()  // 保证图像适应外框
                .aspectRatio(contentMode: .fill)  // 设置图像比例
                .frame(width: 300, height: 110, alignment: .top)
        }
    }
}

struct BackCardView: View {
    var body: some View {
        VStack {
            Spacer()
        }
    }
}

struct TitleView: View {
    var body: some View {
        VStack {
            HStack {
                Text("Certificates")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                Spacer()
            }
            .padding()
            Image("Background1")
            Spacer()
        }
    }
}

struct BottomCardView: View {
    @Binding var show: Bool
    
    var body: some View {
        VStack(spacing: 20) {
            // 小把手
            Rectangle()  //  矩形把手
                .frame(width: 40, height: 5)
                .cornerRadius(3)
                .opacity(0.1)  // 不透明度
            
            Text("This certificate is proof that Meng To has achieved the UI Design course with approval from a Design+Code instructor.")
                .font(.subheadline)
                .lineSpacing(4)
                .multilineTextAlignment(.center)
            
            HStack(spacing: 20.0) {
                RingView(color1: #colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1), color2: #colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1), width: 88, height: 88, percent: 90, show: $show)
                    .animation(Animation.easeInOut.delay(0.3))
                
                VStack(alignment: .leading, spacing: 8.0) {
                    Text("SwiftUI")
                        .fontWeight(.bold)
                    
                    Text("12 of 12 sections completed\n10 hours spent so far")
                        .font(.footnote)
                        .foregroundColor(.gray)
                        .lineSpacing(4)
                }
                .padding(20)
//                .background(BlurView(style: .systemMaterial))
                .background(Color("background3"))
                .cornerRadius(20)
                .shadow(color: Color.black.opacity(0.2), radius: 20, x: 0, y: 20)
            }
            Spacer ()
        }
        .padding(.top, 8)
        .padding(.horizontal, 20)
        .frame(maxWidth: .infinity)
        .background(BlurView(style: .systemThinMaterial))
        .cornerRadius(30)
        .shadow(radius: 20)
    }
}
